<template>
    <div style="height:450px; " ref="chart">
        
    </div>
</template>

<script>
export default {
    name:'ScorePie',
    data(){
        return{
            chart:null
        }
    },
    mounted(){
        this.chart = this.$echarts.init(this.$refs.chart);
        this.initPie();
    },
    methods:{
        initPie(){
            this.chart.setOption(this.option.option);
        }
    },
    computed:{
        option(){
            return{
                option :{
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    color:['#44ee63','#f34646'],
                    series: [
                        {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                            show: true,
                            fontSize: 12,
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },

                        data: [
                            { value: 1048, name: '及格' },
                            { value: 735, name: '不及格' },
                        ]
                        }
                    ]
                    }
            }
        }
    }
}
</script>

<style>

</style>